<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钓鱼小程序UI设计方案</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f7fa;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            color: #3498DB;
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .header p {
            color: #666;
            font-size: 16px;
        }
        
        .pages-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: flex-start;
        }
        
        .page-item {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        
        .page-item:hover {
            transform: translateY(-5px);
        }
        
        .page-title {
            background: #3498DB;
            color: white;
            padding: 15px;
            font-weight: 600;
            text-align: center;
        }
        
        .page-frame {
            width: 375px;
            height: 667px;
            border: none;
            display: block;
        }
        
        .section-title {
            width: 100%;
            background: #2c3e50;
            color: white;
            padding: 20px;
            margin: 30px 0 20px 0;
            border-radius: 8px;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🎣 钓鱼小程序UI设计方案（优化版）</h1>
        <p>现代简洁风格 | 蓝色主题 | 移动端优化 | 精简导航 | 专注核心功能</p>
    </div>
    
    <div class="pages-container">
        <!-- 基础页面 -->
        <div class="section-title">基础页面</div>
        
        <div class="page-item">
            <!-- <div class="page-title">登录授权页</div> -->
            <iframe src="pages/login.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">首页</div> -->
            <iframe src="pages/home.html" class="page-frame"></iframe>
        </div>
        
        <!-- 入场券流程 -->
        <div class="section-title">入场券购买流程</div>
        
        <div class="page-item">
            <!-- <div class="page-title">入场券列表</div> -->
            <iframe src="pages/ticket-list.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">入场券详情</div> -->
            <iframe src="pages/ticket-detail.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">入场券订单确认</div> -->
            <iframe src="pages/ticket-order-confirm.html" class="page-frame"></iframe>
        </div>
        
        <!-- 渔具商城流程 -->
        <div class="section-title">渔具商城流程</div>
        
        <div class="page-item">
            <!-- <div class="page-title">商品详情</div> -->
            <iframe src="pages/mall-product-detail.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">购物车</div> -->
            <iframe src="pages/mall-cart.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">订单确认</div> -->
            <iframe src="pages/mall-order-confirm.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">订单列表</div> -->
            <iframe src="pages/order-list.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">订单详情</div> -->
            <iframe src="pages/order-detail.html" class="page-frame"></iframe>
        </div>
        
        <!-- 入场券核销与计时 -->
        <div class="section-title">入场券核销与计时</div>
        
        <div class="page-item">
            <!-- <div class="page-title">我的入场券</div> -->
            <iframe src="pages/my-tickets.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">入场券二维码</div> -->
            <iframe src="pages/qr-code.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">钓鱼计时</div> -->
            <iframe src="pages/timer.html" class="page-frame"></iframe>
        </div>
        
        <!-- 沸点社区 -->
        <div class="section-title">沸点社区</div>
        
        <div class="page-item">
            <!-- <div class="page-title">沸点主页</div> -->
            <iframe src="pages/moments.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">发布动态</div> -->
            <iframe src="pages/publish-moment.html" class="page-frame"></iframe>
        </div>
        
        <!-- 用户中心 -->
        <div class="section-title">用户中心</div>
        
        <div class="page-item">
            <!-- <div class="page-title">个人中心</div> -->
            <iframe src="pages/profile.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">会员购买</div> -->
            <iframe src="pages/membership.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">地址管理</div> -->
            <iframe src="pages/address-management.html" class="page-frame"></iframe>
        </div>
        
        <!-- 空状态页面 -->
        <div class="section-title">空状态页面</div>
        
        <div class="page-item">
            <!-- <div class="page-title">空购物车</div> -->
            <iframe src="pages/empty-cart.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">空订单列表</div> -->
            <iframe src="pages/empty-orders.html" class="page-frame"></iframe>
        </div>
        
        <div class="page-item">
            <!-- <div class="page-title">空入场券</div> -->
            <iframe src="pages/empty-tickets.html" class="page-frame"></iframe>
        </div>
    </div>
</body>
</html> 